<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <!-- 最外层class命名规则 工程-文件路径-文件名  -->
    <div class="demo-extendPrototype-jsTools">
        <div class="author-demo">
            <div>作者：黄彪</div>
            <div>日期：2017/11/02</div>
        </div>
        <div class="api">
            <div class="anchor">
                <h2 id="API">basicTools.js API</h2>
            </div>
            <div class="anchor">
                <h3 id="Select_props">常用工具方法</h3>
            </div>
            <table>
                <thead>
                <tr>
                    <th>方法名</th>
                    <th>说明</th>
                    <th>参数</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>JSONTrim</td>
                    <td>清除JSON对象的空格，类似于String.trim()</td>
                    <td>无</td>
                    <td>
                        没有返回值，直接修改原来的对象
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <div>
                            <!-- 显示JavaScript代码 -->
                            <pre>
                                <code class="javascript"  v-text="jsCode_JSONTrim">
                                </code>
                            </pre>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>cloneObject</td>
                    <td>克隆一个JSON对象</td>
                    <td>无</td>
                    <td>
                        JSOON,没有一个新的对象
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <div>
                            <!-- 显示JavaScript代码 -->
                            <pre>
                                <code class="javascript"  v-text="jsCode_cloneObject">
                                </code>
                            </pre>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>isType</td>
                    <td>检查数据类型</td>
                    <td>字符串"Array/Object/String/Number/Boolean/Null"</td>
                    <td>
                        布尔值
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <div>
                            <!-- 显示JavaScript代码 -->
                            <pre>
                                <code class="javascript"  v-text="jsCode_isType">
                                </code>
                            </pre>
                        </div>
                    </td>
                </tr>

                </tbody>
            </table>

        </div>
    </div>
</template>

<script>
    // 引入公共组件
    import basicTools from "@zlst/js/tools/basicTools.js"
    import hljs from 'highlight.js'

    var validateObj = {
        company:"  zlst  ",
        person1:{
            name: "huangbiao11",
            children:[
                "son1    ", "        son2"
            ]
        },
        person2:{
            name: "huangbiao22   ",
            children:[
                "son1  ", "   son2  "
            ]
        }
    };

    export default {
        mounted:function (){
//            basicTools.JSONTrim(validateObj);
//            console.dir(validateObj);

//            var newObj = basicTools.cloneObject(validateObj);
//            console.dir(newObj);

//            alert(basicTools.isType(validateObj, "String"))//false
//            alert(basicTools.isType(validateObj, "Object"))//true

            window.setTimeout(function () {
                $('.demo-extendPrototype-jsTools pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 100);

        },
        data: function(){
            return {
                "jsCode_isType":'' +
                'import basicTools from "@zlst/js/tools/basicTools.js\n' +
                'alert(basicTools.isType(validateObj, "String"))//false\n' +
                'alert(basicTools.isType(validateObj, "Object"))//true',

                "jsCode_cloneObject":'' +
                'import basicTools from "@zlst/js/tools/basicTools.js\n' +
                'var newObj = basicTools.cloneObject(validateObj);\n' +
                'console.dir(newObj);',

                "jsCode_JSONTrim":'' +
                'import basicTools from "@zlst/js/tools/basicTools.js\n' +
                ' var validateObj = {\n' +
                '        company:"  zlst  ",\n' +
                '        person1:{\n' +
                '            name: "huangbiao11",\n' +
                '            children:[\n' +
                '                "son1    ", "        son2"\n' +
                '            ]\n' +
                '        },\n' +
                '        person2:{\n' +
                '            name: "huangbiao22   ",\n' +
                '            children:[\n' +
                '                "son1  ", "   son2  "\n' +
                '            ]\n' +
                '        }\n' +
                '    }\n' +
                'basicTools.JSONTrim(validateObj);\n' +
                'console.dir(validateObj);',
            }
        },
    }
</script>

<style lang="scss" scoped>
    /***
   scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
   lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
   ***/
    .demo-extendPrototype-jsTools {
        margin: 40px;
        .api table {
            font-family: Consolas, Menlo, Courier, monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        .api table td, .api table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        .api table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
    }
</style>
